<template>
  <el-card style="height: 68vh; margin: 2vh 2vh 2vh 5vw; border-radius: 5px">
    <div slot="header" class="clearfix">
      <span>{{ user.name }}</span>
    </div>

    <div class="user-profile">
      <div class="box-center">
        <pan-thumb :image="img" :height="'100px'" :width="'100px'" :hoverable="false" style="color: lightgray">
          <div>平平无奇</div>
          管理员
        </pan-thumb>
      </div>
      <div class="box-center">
        <!--        <div class="user-name text-center">{{user.name}}</div>-->
        <div class="user-role text-center text-muted">大概是管学者和举报啥的</div>
      </div>
    </div>

    <div class="user-bio">
      <!--      <div class="user-education user-bio-section">
              <div class="user-bio-section-header">
                <svg-icon icon-class="education"/>
                <span>待审核条目</span></div>
              <div class="user-bio-section-body">
                <div class="text-muted">
                  学者认证：jacker Hai
                  申诉情况：May Chou
                </div>
              </div>
            </div>-->
      <div class="user-skills user-bio-section">
        <div class="user-bio-section-header">
          <svg-icon icon-class="skill"/>
          <span>还有好多等着审核呢</span></div>
        <div class="user-bio-section-body">
          <div class="progress-item" style="margin-top: 3vh">
            <div style="margin-bottom: 3vh; font-size: 15px; font-weight: 700">申诉处理进度</div>
            <el-progress :text-inside="true" :percentage="scholarcomplainrate" :color="customColors" :stroke-width="26" status="warning"/>
          </div>
          <div class="progress-item" style="margin-top: 3vh">
            <div style="margin-bottom: 3vh; font-size: 15px; font-weight: 700">举报处理进度</div>
            <el-progress :text-inside="true" :percentage="complainrate" :color="customColors" :stroke-width="26"/>
          </div>

          <div class="progress-item" style="margin-top: 3vh">
            <div style="margin-bottom: 3vh; font-size: 15px; font-weight: 700">总处理进度</div>
            <el-progress :text-inside="true" :color="customColors" :percentage="(complainrate+scholarcomplainrate)/2" :stroke-width="26"
                         status="success"/>
          </div>
        </div>
        <!--        <canvas id='canvas' style="background-color: #000;"></canvas>-->
      </div>
    </div>
  </el-card>
</template>

<script>
import PanThumb from '@/components/PanThumb'
import axios from "axios";

export default {
  components: {PanThumb},
  props: {
    user: {}
  },
  data() {
    return {
      img: 'http://124.70.186.113:39245' + this.user.avatar,
      complainData: {},
      scholarcomplainData: {},
      complainrate: 0,
      scholarcomplainrate: 0,
      customColors: [
        { color: '#f56c6c', percentage: 20 },
        { color: '#e6a23c', percentage: 40 },
        { color: '#5cb87a', percentage: 60 },
        { color: '#1989fa', percentage: 80 },
        { color: '#6f7ad3', percentage: 100 },
      ],
    }
  },
  methods: {},
  created() {
    console.log('in user card')
    console.log(this.user.avatar)
    console.log('in user card')
    axios.get('/api/user', {params: {userId: sessionStorage.getItem('id')}}) ////获取个人信息
        .then(response => {
          console.log(response);
          console.log("test1");
          this.img = 'http://124.70.186.113:39245' + response.data.data.avatar
        })
    axios.get('api/scholar/getallusercomplain ').then(
        response => {
          console.log('getallusercomplain')
          this.complainData = response.data.data
          console.log(this.complainData);
        }
    )
    axios.get('api/scholar/getallauthorcomplain').then(
        response => {
          console.log('scholargetallcomplain')
          this.scholarcomplainData = response.data.data
          console.log(this.scholarcomplainData);
          let complaindealt = 0;
          let scholarcomplaindealt = 0;
          for (let i = 0; i < this.scholarcomplainData.length; i++) {
            console.log(this.scholarcomplainData[i].status);
            if (this.scholarcomplainData[i].status !== 0)
              scholarcomplaindealt++;
          }
          console.log("scholarcomplaindealt");
          console.log(scholarcomplaindealt);
          this.scholarcomplainrate = scholarcomplaindealt * 100 / this.scholarcomplainData.length
          for (let i = 0; i < this.complainData.length; i++) {
            if (this.complainData[i].status != 0)
              complaindealt++;
          }
          console.log("complaindealt");
          console.log(complaindealt);
          this.complainrate = complaindealt * 100 / this.complainData.length
        }
    )

    // initcanvas();
  },
  mounted() {

  }
}
</script>

<style lang="scss" scoped>
.box-center {
  margin: 0 auto;
  display: table;
}

.text-muted {
  color: #777;
}

.user-profile {
  .user-name {
    font-weight: bold;
  }

  .box-center {
    padding-top: 10px;
  }

  .user-role {
    padding-top: 10px;
    font-weight: 400;
    font-size: 14px;
  }

  .box-social {
    padding-top: 30px;

    .el-table {
      border-top: 1px solid #dfe6ec;
    }
  }

  .user-follow {
    padding-top: 20px;
  }
}

.user-bio {
  margin-top: 20px;
  color: #606266;

  span {
    padding-left: 4px;
  }

  .user-bio-section {
    font-size: 14px;
    padding: 15px 0;

    .user-bio-section-header {
      border-bottom: 1px solid #dfe6ec;
      padding-bottom: 10px;
      margin-bottom: 10px;
      font-weight: bold;
    }
  }
}
</style>
